<template>
  <div class="m-vplaylist u-paddlr u-paddbm">
   <section class="official_pylst_header">
     <div class="ofplheader_bg" >
      <img :src="data.playlist.coverImgUrl" alt="">
     </div>
     <div class="ofplheader_wrap">
       <div class="ofplheader_name f-brk f-thide2">{{data.playlist.name}}</div>
       <div class="ofplheader_content f-thide2">{{data.playlist.description}}</div>
     </div>
   </section>
   <div class="pylst_list">
     <h3 class="u-smtitle">歌曲列表</h3>
     <div class="m-sglst">
       <div href="" class="m-sgitem" v-for="(item,i) in data.playlist.tracks" :key="item.id" @click="selectPlayList(item)">
         <div class="sgfl">{{i+1}}</div>
         <div class="sgfr f-bd f-bd-btm">
           <div class="sgchfl">
             <div class="f-thide sgtl">{{item.name}}
               <span class="sgalia">{{item.alia[0]}}</span>
             </div>
             <div class="f-thide sginfo">
               <span class="xie" v-for="item1 in item.ar" :key="item1.id">
                 {{item1.name}}
                 <span>/</span>
                 </span>
                - {{item.name}}</div>
           </div>
           <div class="sgchfr">
             <span class="u-hmsprt sgchply"></span>
           </div>
         </div>
       </div>
     </div>
   </div>
   <div class="m_newcomm" id="m_comment">
     <div class="m-talk pylst_comment">
       <div class="m-comments">
         <h4 class="cmt_title">精彩评论</h4>
         <div class="cmt_list">
           <div class="cmt_item" v-for="item in comment" :key="item.userId">
             <div class="cmt_head">
               <a href="" class="userphoto">
                 <img :src="item.user.avatarUrl" alt="">
               </a>
             </div>
             <div class="cmt_wrap f-bd f-bd-btm">
              <div class="cmt_header">
                <div class="cmt_meta">
                  <span class="cmt_user">
                    <a href="" class="nickname">{{item.user.nickname}}</a>
                  </span>
                  <div class="cmt_time">
                    <span>{{item.time}}</span>
                  </div>
                </div>
                <div class="cmt_like">
                  <span class="cmt_likearea">
                    <span class="cmt_count">{{item.likedCount}}</span>
                    <i class="cmt_likeicn">
                      <svg class="u-svg u-svg-unzancmt" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28">
                        <path fill="#999" d="m25.857 14.752c-.015.059-1.506 5.867-2.932 8.813-1.162 2.402-3 2.436-3.099 2.436h-12.826v-13c3 0 5.728-4 5.728-7.275 0-3.725 1.433-3.725 2.142-3.725 1.327 0 1.978 1.345 1.978 4 0 2.872-.832 4.525-.839 4.537-.161.31-.155.682.027.981.181.299.5.482.849.482h6.942c.922 0 1.551.215 1.866.64.467.626.286 1.705.164 2.112m-23.857 10.248v-10c0-1.795.659-1.981.855-2h2.145v13h-2.173c-.829 0-.827-.648-.827-1m25.309-13.54c-.713-.969-1.886-1.46-3.482-1.46h-5.519c.26-.932.519-2.285.519-4 0-5.221-2.507-6-4-6-1.909 0-4.185.993-4.185 5.725 0 2.206-1.923 5.275-3.815 5.275h-4-.011c-1.034.011-2.816.862-2.816 4v10.02c0 1.198.675 2.979 2.827 2.979h16.971.035c.364 0 3.224-.113 4.894-3.564 1.514-3.127 3.01-8.942 3.056-9.14.071-.23.664-2.289-.474-3.836"></path>
                      </svg>
                    </i>
                  </span>
                </div>
              </div>
              <div class="cmt_content">
                <span class="cmt_text">{{item.content}}</span>
              </div>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
  </div>
</template>
<script>


import axios from "axios";


export default {
  data() {
    return {
      data: [],
      comment:[],
    };
  },

  created() {
   this.getlist();
   this.getcomment();
  },

  methods: {
   getlist() {
     console.log(this.$route.params.id)
      axios
        .get("http://171.220.242.237:3001/playlist/detail",
         {params:{id:this.$route.params.id}})
        .then((res) => {
           console.log(res);
          this.data = res.data;
          console.log(this.data)
        })
        .catch((err) => {
          console.error(err);
        });
    },
    getcomment() {
     console.log(this.$route.params.id)
      axios
        .get("http://171.220.242.237:3001/comment/playlist",
         {params:{id:this.$route.params.id}})
        .then((res) => {
           console.log(res);
           for (let i = 0; i < res.data.hotComments.length; i++) {
             var time=new Date(res.data.hotComments[i].time).toLocaleString()
           res.data.hotComments[i].time=time
           }
          this.comment = res.data.hotComments;
          if (res.data.hotComments.length===0) {
            this.comment = res.data.comments;
          }
          console.log(this.comment)
        })
        .catch((err) => {
          console.error(err);
        });
    },
    selectPlayList(item){
      const id=item.id
      console.log(id)
      this.$router.push({
        name:'#播放页面',
        params :{id}
      })
    }

  },

};
</script>
<style scoped>
.m-sgitem .sgalia {
    color: #888;
    margin-left: 4px;
}
.m-vplaylist {
    position: absolute;
    top: 0;
    background-color: #fff;
    min-height: 100%;
}
.u-paddlr {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}
.u-paddbm {
    padding-bottom: env(safe-area-inset-bottom);
}
.official_pylst_header {
    position: relative;
    padding: 40px 20px;
    overflow: hidden;
    height: 130px;
}
.official_pylst_header .ofplheader_bg {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
}
.official_pylst_header .ofplheader_wrap {
    position: relative;
    z-index: 100;
    color: #fff;
}
.official_pylst_header .ofplheader_wrap .ofplheader_name {
    font-size: 18px;
}
.f-thide2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.official_pylst_header .ofplheader_wrap .ofplheader_content {
    margin-top: 20px;
    font-size: 14px;
    color: hsla(0,0%,100%,.8);
}
.u-smtitle {
    height: 23px;
    line-height: 23px;
    padding: 0 10px;
    font-size: 12px;
    color: #666;
    background-color: #eeeff0;
}
.m-sglst {
    position: relative;
}
.m-sgitem {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
.m-sgitem .sgfl {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 40px;
    font-size: 17px;
    color: #999;
    margin-left: -10px;
    text-align: center;
    padding-top: 10px;
    padding-left: 5px;
}
.m-sgitem .sgfr {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    display: flex;
    position: relative;
}
.f-bd {
    position: relative;
}
.m-sgitem .sgchfl {
    padding: 6px 0;
    width: 0;
}
.m-sgitem .sgchfl, .m-sgitem .sgfr {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}
.m-sgitem .sgtl {
    font-size: 17px;
    text-align: left;
}
.f-thide {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: normal;
}
.m-sgitem .sginfo {
    font-size: 12px;
    color: #888;
    text-align: left;
}
.m-sgitem .sgchfr {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 10px;
}
.m-sgitem .sgchply {
    display: inline-block;
    width: 22px;
    height: 22px;
    background-position: -24px 0;
}
.u-hmsprt {
    background: url(//s3.music.126.net/mobile-new/img/index_icon_2x.png?5207a28…=) no-repeat;
    background-size: 166px 97px;
}
/* 评论 */
.m_newcomm {
    position: relative;
    margin-top: 20px;
}.pylst_comment {
    margin-top: -20px;
}.m-comments {
    word-wrap: break-word;
    word-break: break-all;
}
.m-comments {
    word-break: break-all!important;
    word-break: break-word!important;
}.m-comments .cmt_title {
    padding: 0 10px;
    height: 23px;
    line-height: 23px;
    margin: 0;
    padding: 4px 10px;
    color: #666;
    font-size: 12px;
    font-weight: 400;
    background: rgba(0,0,0,.05);
}.m-comments .cmt_item {
    padding-top: 10px;
    width: 100%;
    display: -webkit-flex;
    display: -webkit-box;
    display: flex;
    -webkit-flex-direction: row;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
}.m-talk .m-comments .cmt_item .cmt_head {
    height: 35px;
}.m-comments .cmt_item .cmt_head {
    margin: 0 10px;
    -webkit-flex: none;
    -webkit-box-flex: 0;
    flex: none;
}.m-comments a {
    color: #507daf;
    text-decoration: none;
}
.m-comments .cmt_item .cmt_head img {
    display: block;
    border-radius: 50%;
    width: 30px;
    height: 30px;
}
.m-comments .cmt_item .cmt_head+.cmt_wrap {
    padding-left: 0;
}.m-comments .cmt_item .cmt_wrap {
    padding-right: 10px;
    padding-bottom: 11px;
    padding-left: 10px;
    -webkit-flex: auto;
    -webkit-box-flex: 1;
    flex: auto;
    width: 0;
}.f-bd {
    position: relative;
}.m-comments .cmt_item .cmt_wrap .cmt_header {
    display: -webkit-flex;
    display: -webkit-box;
    display: flex;
    -webkit-flex-direction: row;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
}.m-comments .cmt_item .cmt_wrap .cmt_meta {
    -webkit-flex: auto;
    -webkit-box-flex: 1;
    flex: auto;
    width: 0;
    font-size: 0;
    text-align: left;
}.m-comments .cmt_item .cmt_wrap .cmt_user {
    max-width: 100%;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
}.m-comments .cmt_item .cmt_wrap .cmt_user a {
    font-size: 14px;
    color: #666;
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-box-flex: 1;
    -webkit-flex: auto;
    flex: auto;
    text-align: left;
}.m-comments a {
    color: #507daf;
    text-decoration: none;
}.m-comments .cmt_item .cmt_wrap .cmt_time {
    font-size: 9px;
    color: #999;
}.m-comments .cmt_item .cmt_wrap .cmt_like {
    width: 65px;
    height: 22px;
    line-height: 22px;
    font-size: 11px;
    color: #999;
    -webkit-flex: none;
    -webkit-box-flex: 0;
    flex: none;
    text-align: right;
}.m-comments .cmt_item .cmt_wrap .cmt_like .cmt_likearea {
    display: inline-block;
    min-width: 30px;
    padding-left: 5px;
}.m-comments .cmt_item .cmt_wrap .cmt_like .cmt_count {
    vertical-align: middle;
}.m-comments .cmt_item .cmt_wrap .cmt_like .cmt_likeicn {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 6px;
    line-height: 0;
    vertical-align: middle;
    cursor: pointer;
}.u-svg {
    display: inline-block;
    vertical-align: middle;
    background-position: 0 0;
    background-size: contain;
    background-repeat: no-repeat;
}svg:not(:root) {
    overflow: hidden;
}.m-comments .cmt_item .cmt_wrap .cmt_content {
    position: relative;
    color: #333;
    text-align: left;
    font-size: 15px;
    line-height: 22px;
    margin-top: 5px;
}.m-comments .cmt_item .cmt_wrap .cmt_emoji, .m-comments .cmt_item .cmt_wrap .cmt_express_noparse, .m-comments .cmt_item .cmt_wrap .cmt_text {
    vertical-align: middle;
}
.xie:last-child span{
  display: none;
}
</style>